<template>
	<Layout>
		<header class="masthead" :style="'background-image: url(http://127.0.0.1:1337'+ this.generals.cover.url + ')'">
			<div class="container position-relative px-4 px-lg-5">
				<div class="row gx-4 gx-lg-5 justify-content-center">
					<div class="col-md-10 col-lg-8 col-xl-7">
						<div class="site-heading">
							<h1>{{generals.title}}</h1>
							<span class="subheading">{{generals.subtitle}}</span>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!-- Main Content-->
		<div class="container px-4 px-lg-5">
			<div class="row gx-4 gx-lg-5 justify-content-center">
				<div class="col-md-10 col-lg-8 col-xl-7">
					<!-- Post preview-->
					<div class="post-preview" v-for="edge in $page.posts.edges" :key="edge.node.id">
						<g-link :to="'/posts/'+ edge.node.id">
							<h2 class="post-title">{{edge.node.title}}</h2>
							<!-- <h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3> -->
						</g-link>
						<p class="post-meta">
							Posted by
							<a href="#!">{{edge.node.created_by.firstname + edge.node.created_by.lastname}}</a>
							on {{edge.node.created_at}}
						</p>
						<p>
							<span v-for="tag in edge.node.tags" :key="tag.id">
								<g-link :to="'/tag/' + tag.id">
									{{tag.title}}
								</g-link>&nbsp;
							</span>
						</p>
						<!-- Divider-->
						<hr class="my-4" />
					</div>

					<!-- Pager-->
					<!-- <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase"
							href="#!">Older Posts →</a></div> -->
					<Pager :info="$page.posts.pageInfo" />
				</div>
			</div>
		</div>
	</Layout>
</template>

<page-query>
	query($page: Int){
	posts:allStrapiPosts(perPage: 3, page: $page) @paginate{
	pageInfo {
	totalPages
	currentPage
	}
	edges{
	node{
	id
	title
	created_by{
	id
	firstname
	lastname
	}
	tags{
	id
	title
	}
	created_at
	}
	}
	}
	
	  general:allStrapiGeneral {
	    edges{
	      node{
	         id
	         title
	         subtitle
	         cover{
	            url
	         }
	      }
	    }
	  }
	}
</page-query>
<script>
	import {
		Pager
	} from 'gridsome'
	export default {
		metaInfo: {
			title: 'Hello, world!'
		},
		components: {
			Pager
		},
		mounted() {
			
		},
		computed:{
			generals(){
				return this.$page.general.edges[0].node
			}
		}
	}
</script>

<style scoped>
	nav{

	}
	nav a{
		border: 1px solid #495057;
		display: block;
		float: left;
		text-align: center;
		line-height: 38px;
		width: 40px;
		height: 40px;
	}
	nav .active{
		color: white;
		background-color: #000000;
	}
</style>
